<template>
  <div>
    <el-form
      :model="formData"
      :rules="rules"
      ref="formRef"
      :label-width="labelWidth"
      :inline="true"
    >
      <el-row type="flex" style="flex-wrap: wrap">
        <template v-for="(item, index) in formConfig">
          <el-col :span="item.colSpan || '12'" :key="item.prop">
            <el-form-item :label="item.label" :prop="item.prop" :key="index">
              <component
                :style="item.style || { width: '180px' }"
                :placeholder="item.placeholder"
                v-if="item.type === 'select'"
                :is="getComponent(item.type)"
                v-model="formData[item.prop]"
                v-bind="item.attrs"
                @change="handleChange(item, $event)"
                @click="handleClick(item, $event)"
                :disabled="item.disabled"
                clearable
                :type="item.type === 'textarea' ? 'textarea' : undefined"
              >
                <template v-if="item.type === 'select'">
                  <el-option
                    v-for="opt in getOptions(item)"
                    :key="opt.value"
                    :label="opt.label"
                    :value="opt.value"
                  />
                </template>
              </component>
              <template v-else-if="item.type === 'checkbox'">
                <el-checkbox-group
                  v-model="formData[item.prop]"
                  v-bind="item.attrs"
                  @change="handleChange(item, $event)"
                  :style="item.style || { width: '200px' }"
                >
                  <el-checkbox
                    v-for="opt in getOptions(item)"
                    :key="opt.value"
                    :label="opt.value"
                    :disabled="item.disabled"
                  >
                    {{ opt.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </template>
              <template v-else-if="item.type === 'radio'">
                <el-radio-group
                  :style="item.style || { width: '200px' }"
                  v-model="formData[item.prop]"
                  v-bind="item.attrs"
                  @change="handleChange(item, $event)"
                >
                  <el-radio
                    v-for="opt in getOptions(item)"
                    :key="opt.value"
                    :label="opt.value"
                    :disabled="item.disabled"
                  >
                    {{ opt.label }}
                  </el-radio>
                </el-radio-group>
              </template>

              <el-date-picker
                v-else-if="
                  ['date', 'daterange', 'datetime'].includes(item.type)
                "
                :style="item.style || { width: '200px' }"
                v-model="formData[item.prop]"
                :type="item.type"
                :placeholder="item.placeholder"
                :format="item.format || 'yyyy-MM-dd'"
                :value-format="item.valueFormat || 'yyyy-MM-dd'"
                v-bind="item.attrs || {}"
                @change="handleChange(item, $event)"
                :disabled="item.disabled"
                clearable
              />
              <template v-if="item.slot">
                <div :style="item.style || { width: '200px' }">
                  <slot
                    :name="item.slot"
                    :value="formData[item.prop]"
                    :item="item"
                  />
                </div>
              </template>

              <!-- ✅ 普通文本展示 -->
              <template v-else-if="item.type === 'text'">
                <div
                  :style="item.style || { width: '200px', lineHeight: '36px' }"
                >
                  {{ formData[item.prop] || item.defaultText || "-" }}
                </div>
              </template>
              <!-- <slot
                v-else-if="item.type == 'button'"
                name="formBtn"
                :style="item.style || { width: '200px' }"
              />

              <slot
                v-else-if="item.slot && item.type != 'button'"
                :name="item.slot"
                :style="
                  item.style || { width: '200px', border: '1px solid red' }
                "
              />
              <template v-else-if="item.type === 'text'">
                <div v-if="item.slot">
                  <slot :name="item.slot" :value="formData[item.prop]"></slot>
                </div>
                <div
                  v-else
                  :style="item.style || { width: '200px', lineHeight: '36px' }"
                >
                  {{ formData[item.prop] || item.defaultText || "-" }}
                </div>
              </template> -->

              <component
                :placeholder="item.placeholder"
                :style="item.style || { width: '200px' }"
                v-else
                :show-password="item.type == 'password'"
                :is="getComponent(item.type)"
                v-model="formData[item.prop]"
                v-bind="item.attrs"
                @change="handleChange(item, $event)"
                :disabled="item.disabled"
                clearable
                :type="item.type === 'textarea' ? 'textarea' : undefined"
              />
            </el-form-item>
          </el-col>
        </template>

        <!-- 按钮插槽 -->
        <el-col :span="24">
          <slot name="actions" />
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "TopSearchForm",
  props: {
    labelWidth: {
      type: String,
      default: "100px",
    },
    inline: {
      type: Boolean,
      default: true,
    },
    value: {
      type: Object,
      required: true,
    },
    formConfig: {
      type: Array,
      required: true,
    },
    dynamicOptions: {
      type: Object,
      default: () => ({}),
    },
    rules: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // formData: { ...this.value },
    };
  },

  computed: {
    formData: {
      get() {
        return this.value;
      },
      set() {},
    },
  },
  methods: {
    getComponent(type) {
      const map = {
        input: "el-input",
        select: "el-select",
        radio: "el-radio-group",
        checkbox: "el-checkbox-group",
        switch: "el-switch",
        date: "el-date-picker",
        number: "el-input-number",
        textarea: "el-input",
        button: "el-button",
        text: "div",
        password: "el-input",
      };
      return map[type] || "el-input";
    },
    getOptions(item) {
      if (item.options && item.options.length) {
        return item.options;
      }
      if (item.optionsKey && this.dynamicOptions[item.optionsKey]) {
        return this.dynamicOptions[item.optionsKey].map((opt) => ({
          label: opt[item.optionLabel || "label"],
          value: opt[item.optionValue || "value"],
        }));
      }
      return [];
    },
    handleChange(item, val) {
      this.$emit("change", { field: item.prop, value: val, item });
    },
    handleClick(item, event) {
      if (item.click) item.click(event, this.formData);
      this.$emit("click", { field: item.prop, event, item });
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.formRef.validate((valid) => {
          if (valid) resolve(this.formData);
          else reject(new Error("校验失败"));
        });
      });
    },
    reset() {
      this.$refs.formRef.resetFields();
      this.formData = {}; // 若父组件使用 v-model 更新初始值，可以保留这一行
    },
  },
};
</script>

<style scoped>
/* ::v-deep(.el-form-item) {
  margin-bottom: 20px;
} 
::v-deep(.el-input__inner) {
  height: 36px;
}  */
</style>
